<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/angular-ui-router/1.0.30/angular-ui-router.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp" ng-controller="myCtrl">
      <h1>{{indexName}}</h1>
      <div class="router-content">
        <!-- 2. 定义视图 -->
        <div ui-view></div>
      </div>
    </div>
    <script>
      // 1. 注入相关的模块
      var app = angular.module("myApp", ["ui.router"]);
      app.controller("myCtrl", function ($scope) {
        $scope.indexName = "主页";
      });
      // 3. 配置路由,注意传入$stateProvider
      app.config(function($stateProvider,$urlRouterProvider){
          // 4. 定义两个路由
          $urlRouterProvider.otherwise("/R2");
          $stateProvider.state("R2",{
            url:"/R2",
            template:"<h1>World</h1>"
          })
      })
    </script>
  </body>
</html>
